<template>
  <div>
    <div class="weekend-title">周末去哪儿</div>
    <ul class="weekend-list">
      <li class="weekend-item border-bottom" v-for="(item, index) of recommendList" :key="index" >
        <div class="item-image-wrapper">
          <img class="item-image" :src="item.imgUri" >
        </div>
        <div class="item-content">
          <div class="item-title">{{ item.title }}</div>
          <div class="item-desc">{{ item.desc }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "HomeRecommend",
    data() {
      return {
        recommendList: [
          {
            title: "庐山西海花千谷",
            desc: "休闲，娱乐场所。空气清新，百花斗艳。",
            imgUri: require("@/assets/images/r1.jpg")
          },
          {
            title: "庐山上汤温泉",
            desc: "江西省九江市星子县温泉镇",
            imgUri: require("@/assets/images/r2.jpg")
          },
          {
            title: "庐山博阳河生态休闲风景区",
            desc: "一条路，两边都是树，心里边都安静了。",
            imgUri: require("@/assets/images/r3.jpg")
          },
          {
            title: "庐山西海观湖岛景区",
            desc: "山势险峻，风景如画，值得一游。",
            imgUri: require("@/assets/images/r4.jpg")
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>

  @import "~styles/mixins.scss";

  .weekend-title {
    margin-top: .2rem;
    line-height: .8rem;
    background-color: #eeeeee;
    text-indent: .2rem;
  }

  .weekend-list {
    .weekend-item {
      /*height: 3.92rem;*/
      overflow: hidden;
      margin-bottom: .1rem;
      .item-image-wrapper {
        overflow: hidden;
        height: 0;
        padding-bottom: 37.7%;
        .item-image {
          width: 100%;
        }
      }

      .item-content {
        padding: .1rem .2rem 0 .2rem;
        .item-title {
          font-size: .30rem;
          line-height: 0.54rem;
          @include ellipsis
        }
        .item-desc {
          color: #bbb;
          @include ellipsis;
          line-height: 0.4rem;
        }
      }
    }
  }
</style>